<template>
	<div id="reservation_detail">
		<v-title :title='title' text1='预约用户：' :value1='obj.idCard' text2='预约状态：' :value2='obj.status' :isShow='isShow'></v-title>
		<div class="d-content">
			<div class="list">
				<strong>预约业务：</strong>
				<span>{{obj.businessName}}</span>
			</div>
			<div class="list">
				<strong>预约时间段：</strong>
				<span>{{obj.appoDate}}  {{obj.appotime}}</span>
			</div>
			<!-- <div class="list">
				<strong>操作时间：</strong>
				<span>{{obj.createTime}}</span>
			</div> -->
			<div class="list">
				<strong>修改人：</strong>
				<span v-if="obj.updateFlag == true">{{obj.updatePersonName}}</span>
				<span v-else>无</span>
			</div>
			<div class="list">
				<strong>修改时间：</strong>
				<span v-if="obj.updateFlag == true">{{obj.updateTime}}</span>
				<span v-else>无</span>
			</div>
		</div>
	</div>
</template>
<script>
	import vTitle from './view/titleDiv.vue'
	import {getRecordDetail} from '../api/getData.js'
	export default {
		name: "reservation_detail",
		components:{
			vTitle
		},
		data() {
			return {
				title:'预约记录详情',
				value1:'',
				value2:'',
				isShow:true,
				obj:{},
				appoid:''
			};
		},
		created() {
			this.getParams()
		}, // 创建时
		beforeMount() {}, // 挂载之前
		mounted() {
			this.getDetail()
		}, // 挂载之后
		beforeUpdate() {}, // 数据更新时调用,在渲染之前
		updated() {}, // 数据更新后,渲染后调用(禁止)
		beforeDestroy() {}, // 实例销毁前调用,解绑中间层的数据传输
		destroyed() {}, // 实例销毁后调用
		methods: {
			getParams(){
				this.appoid = this.$route.query.appoId 
			},
			getDetail(){
				getRecordDetail({
					appoId:this.appoid,
					latticeId:JSON.parse(window.sessionStorage.getItem('latticeid'))
				}).then((res) =>{
					console.log(res.data,"预约记录详情")
					if(res.data.code === 0){
						this.obj = res.data.data
					}else{
						this.$message.error(res.data.msg)
					}
					
				}).catch((error) =>{
					console.log(error)
				})
			}
		}
	};
</script>
<style lang='scss'>
	#reservation_detail{
		font-size: 14px;
		.d-content{
			background: #fff;
			margin-top: 24px;
			padding: 40px 0 250px 0;
			.list{
				margin-bottom: 16px;
				width: 100%;
				display:flex;
				strong{
					display: inline-block;
					width: 35%;
					font-weight: normal;
					text-align: right;
					color: #000;
					font-size: 15px;
				}
				span{
					display: inline-block;
					width: 40%;
					padding: 0 12px;
					text-align: left;
					line-height: 1.4;
					color: #808492;
				}
			}
		}
	}
</style>
